import React, { Component } from 'react'
import Banner from '#components/Banner/Banner'
import TeachCard from './TechCard.jsx'
import Layout from '#components/Layout/Layout'

import './less/tech.less'

class Tech extends Component {
  constructor(props) {
    super(props)
    this.state = {
      techList: [
        {
          title: '一个基于VUE2.0的UI框架',
          desc: 'XX-UI,搭建好开发框架，写了几个小组件，学习了如何搭建一个UI开发框架',
          link: 'https://github.com/frontHu/XX-UI',
          bg: require('#assets/vue.jpg')
        },
        {
          title: 'simple-modal',
          desc:
            '之前在开发自己网站的时候，写的一个小弹窗组件，达到练习和学习的价值',
          link: 'https://github.com/frontHu/simple-modal',
          bg: require('#assets/modal.jpg')
        },
        {
          title: 'progressbar-react',
          desc: '以前学前端的时候写的一个进度条，用react改造一下',
          link: 'https://github.com/frontHu/progressbar-react',
          bg: require('#assets/progress.jpg')
        },
        {
          title: 'filelist-inject-webpack-plugin',
          desc:
            '一个webpack插件，解决公司微前端应用js需要手动引用加载问题，解放劳动力',
          link: 'https://gitee.com/Fsookie/filelist-inject-webpack-plugin',
          bg: require('#assets/webpack.jpg')
        },
        {
          title: 'win-login-plugin',
          desc: '微前端应用，解决前端登录问题，提高开发效率',
          link: 'https://gitee.com/Fsookie/win-login-plugin',
          bg: require('#assets/login.jpg')
        },
        {
          title: 'winning-radiate-svg',
          desc: '基于svg的人体图部分内脏选择控件，其中使用了D3.js',
          link: 'https://gitee.com/Fsookie/human-body-svg',
          bg: require('#assets/body.jpg')
        },
        {
          title: 'win-monitor',
          desc: '基于无痕埋点实现的前端监控方案',
          link: 'https://gitee.com/Fsookie/event-monitor',
          bg: require('#assets/monitor.jpg')
        }
      ]
    }
  }
  render() {
    return (
      <section className="tech">
        <Banner image={require('#assets/3.jpg')} height="240"></Banner>
        <div className="tech-sub-header">
          <div className="grid-row">
            <div className="tech-profile-card">
              <i className="iconfont icon-GitHub"></i>
            </div>
          </div>
        </div>
        <div className="tech-content">
          <div className="tech-main grid-row">
            {this.state.techList.map((v, k) => {
              return <TeachCard {...v} key={k}></TeachCard>
            })}
          </div>
        </div>
      </section>
    )
  }
}
export default Layout(Tech)
